<template>
    <div>
        <v-app id="inspire">
            <v-container class="grey lighten-5">
                <v-toolbar color="green lighten-1" dense>
                    <v-spacer></v-spacer>
                    <v-btn
                            v-model="fab"
                            class="ma-2"
                            color="grey lighten-2"
                            small
                            @click="OpenCreateAppDialog"
                    >
                        <v-icon v-if="fab">mdi-close</v-icon>
                        <v-icon v-else>mdi-plus</v-icon>
                    </v-btn>
                </v-toolbar>
                <v-row class="mb-6">
                    <v-col
                            v-for="(item, index) in applist"
                            :key="index"
                            md="3"
                            cols="3"
                    >
                        <v-card
                                outlined
                                class="pa-3"
                                max-height="400"
                        >
                            <v-list-item>
                                <v-list-item-avatar color="grey"></v-list-item-avatar>
                                <v-list-item-content>
                                    <v-list-item-title class="headline">{{ item.name }}</v-list-item-title>
                                    <v-list-item-subtitle>by Gibson Xue</v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>

                            <v-img
                                    src="http://localhost:8000/static/mountain.jpg"
                                    height="194"
                            ></v-img>

                            <v-card-text>
                                {{ item.describe }}
                            </v-card-text>
                            <v-card-actions>
                                <v-btn
                                        text
                                        color="deep-purple accent-4"
                                >
                                    Run
                                </v-btn>
                                <v-btn
                                        text
                                        color="blue accent-4"
                                        @click="OpenDetailDialog(item.id)"
                                >
                                    View Details
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
                <div class="text-center">
                    <v-container>
                        <v-row justify="center">
                            <v-col cols="8">
                                <v-container class="max-width">
                                    <v-pagination
                                            v-model="page"
                                            :length="page_length"
                                            :total-visible="5"
                                            @input="next"
                                    ></v-pagination>
                                </v-container>
                            </v-col>
                        </v-row>
                    </v-container>
                </div>
            </v-container>
            <v-dialog
                    v-model="dialog2"
                    max-width="600px"
            >
                <v-card>
                      <v-form
                        ref="form"
                        lazy-validation
                        >
                    <v-card-title>
                        <span class="headline">Create {{ appcatagory.name }} Group</span>
                    </v-card-title>
                    <v-card-text>
                        <v-container>
                            <v-row>
                                <v-col cols="12" sm="6" md="4">
                                    <v-text-field readonly v-model="app.appcatagory" label="AppCatagory_ID"></v-text-field>
                                </v-col>
                                <v-col cols="12" sm="6" md="4">
                                    <v-text-field v-model="app.name" label="App Group Name" required></v-text-field>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="dialog2 = false">Close</v-btn>
                        <v-btn color="blue darken-1" text @click="create_app">Create
                        </v-btn>
                    </v-card-actions>
                   </v-form>
                </v-card>
            </v-dialog>

            <!--Slide Window-->
            <v-dialog
                    v-model="dialog"
                    fullscreen
                    hide-overlay
                    transition="dialog-bottom-transition"
            >
                <v-card tile flat>
                    <v-toolbar
                            dark
                            dense
                            color="primary"
                    >
                        <v-btn
                                icon
                                @click="dialog = false"
                        >
                            <v-icon>mdi-close</v-icon>
                        </v-btn>
                        <v-toolbar-title>{{ appdetail.name }}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-toolbar-items>
                            <v-btn
                                    text
                                    @click="Save(appdetail.id)"
                            >
                                Save
                            </v-btn>
                        </v-toolbar-items>
                    </v-toolbar>
                    <v-card-text>
                        <v-container>
                            <v-row>
                                <v-col cols="12" sm="6">
                                    <v-autocomplete
                                            :items="grouplist"
                                            v-model="app.group_list"
                                            multiple
                                            item-value="id"
                                            item-text="groupname"
                                            label="Group*"
                                    ></v-autocomplete>
                                </v-col>
                            </v-row>
                            <v-row>
                                <v-col lg="4">
                                    <v-file-input
                                            v-model="files"
                                            placeholder="Upload your documents"
                                            label="File input"
                                            outlined
                                            multiple
                                            prepend-icon="mdi-paperclip"
                                            color="deep-purple accent-4"
                                    ><template v-slot:selection="{ text }">
                                            <v-chip
                                                    small
                                                    label
                                                    color="primary"
                                            >
                                                {{ text }}
                                            </v-chip>
                                        </template>
                                    </v-file-input>
                                </v-col>
                                <v-col lg="2">
                                    <v-btn @click="upload(appdetail.id)" colour="primary">
                                        Upload
                                    </v-btn>
                                </v-col>
                            </v-row>

                            <small>Group Var*</small>
                            <v-col cols="12" sm="6">
                                <v-textarea
                                        auto-grow
                                        outlined
                                        rows="10"
                                        clearable
                                        clear-icon="cancel"
                                        background-color="grey lighten-2"
                                        color="cyan"
                                        label="Input Group Var (YAML)"
                                        v-model="app.config"
                                ></v-textarea>
                            </v-col>
                            <v-col cols="12" sm="6">
                                <v-btn
                                        color="primary"
                                        class="ma-2"
                                        dark
                                        @click="dialog3 = true"
                                >Historical Version
                                </v-btn>
                            </v-col>
                            <small>Description*</small>
                            <v-col cols="2" sm="6">
                                <v-textarea
                                        auto-grow
                                        outlined
                                        rows="1"
                                        clearable
                                        clear-icon="cancel"
                                        background-color="grey lighten-2"
                                        color="cyan"
                                        label="Input Description For This App"
                                        v-model="app.describe"
                                ></v-textarea>
                            </v-col>
                        </v-container>
                    </v-card-text>
                </v-card>
            </v-dialog>
        </v-app>
    </div>
</template>


<script>
import Axios from 'axios'
import {mapState, mapActions} from 'vuex'
import App from '../models/app';
export default {
    name: 'AppSheets',
    data: () => ({
        app: new App(),
        files: [],
        fab: false,
        top: true,
        page: 1,
        page_size: 8,
        query_item: {},
        dialog: false,
        dialog2: false,
        dialog3: false,
        notifications: false,
        sound: true,
        widgets: false,
    }),
    created() {
        this.getRouterData()
        this.GetGroupInfo()
        this.GetCatagoryInfo(this.$route.params.appcatagory)
    },
    mounted() {
        this.GetAppList()
    },
    computed: {
        ...mapState([
            "apps", "group"
        ]),
        grouplist() {
            return this.group.groups
        },
        appcatagory() {
            return this.apps.app_catagory
        },
        applist() {
            return this.apps.app_list.results
        },
        appdetail() {
            return this.apps.app_detail
        },
        appconfig(){
            return this.apps.app_configs[0]
        },
        page_length() {
            let length = Math.ceil(this.apps.app_list.count / this.page_size)
            return length
        },
    },
    watch: {
        $route(to) {
            this.getRouterData()
        },
        appdetail(Var, oldVar) {
            if (Var.scripts == null) {
                this.files = []
            } else {
                this.files = {name: Var.scripts}
            }
            this.app.group_list = Var.group_list
            this.app.describe = Var.describe
            this.app.id = Var.id
            this.app.name = Var.name
        },
        appconfig(Var) {
            this.app.config = Var
        }
    },
    methods: {
        ...mapActions(
            'apps', ['GetAppList', 'GetAppDetails', 'GetAppConfig', 'GetCatagoryInfo','CreateApp','UpdateApp']
        ),
        ...mapActions(
            'group', ['GetGroupInfo']
        ),
        next(page) {
            this.query_item.appcatagory = this.$route.params.appcatagory
            this.query_item.page_size = this.page_size
            this.query_item.page = page
            this.GetAppList(this.query_item)
        },
        Save() {
            this.dialog = false
            console.log(this.app)
            this.UpdateApp(this.app)
        },
        OpenCreateAppDialog(){
            this.dialog2 = true
            this.app.appcatagory = this.query_item.appcatagory
        },
        create_app(){
            this.CreateApp(this.app)
            this.dialog2 = false
            this.GetAppList(this.query_item)
        },
        upload(id) {
            var formData = new FormData();
            for (var i = 0; i < this.files.length; i++) {
                formData.append('scripts', this.files[i]);
                formData.append('name', this.app.name );
            }
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            };
            Axios.patch("http://127.0.0.1:8000/apps/" + id + "/", formData, config)
                .then((response) => {
                    if (response.status = 200) {
                        console.log({
                            type: 'success',
                            message: '附件上传成功!'
                        });
                    }
                    this.files = {name: response.data.scripts}
                })
        },
        getRouterData() {
            this.query_item.appcatagory = this.$route.params.appcatagory
            this.query_item.page_size = this.page_size
            this.query_item.page = this.page
            this.page = 1
            this.GetAppList(this.query_item)
        },
        OpenDetailDialog(AppId) {
            this.dialog = true
            this.GetAppDetails(AppId)
        },
    }
}
</script>